<style lang="scss" scoped>
    @import './login.scss';
</style>
<template>
    <div id="login" class="">
        <div class="editorial_cont" ref="editorialCont">
            <svg class="editorial"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                viewBox="0 24 150 28"
                preserveAspectRatio="none">
                <defs>
                    <path id="gentle-wave" d="M-160 44c30 0
                        58-18 88-18s
                        58 18 88 18
                        58-18 88-18
                        58 18 88 18
                        v44h-352z"/>
                </defs>
                <g class="parallax">
                    <use xlink:href="#gentle-wave" x="50" y="0" fill="rgba(43,60,77,.7)" fill-opacity="1"/>
                    <use xlink:href="#gentle-wave" x="50" y="3" fill="rgba(0,0,0,.2)" fill-opacity="1"/>
                    <use xlink:href="#gentle-wave" x="50" y="6" fill="rgba(43,60,77,1)" fill-opacity="1"/>
                </g>
            </svg>
        </div>
        <div class="content" ref="content"></div>
        <div class="cont">
            <img id="logo"
                src=""/>
            <h1>用户登录</h1>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
                <el-form-item prop="name">
                    <div class="ui left icon input w-100p pos-r">
                        <input type="text"
                            auto-complete="off"
                            v-model="ruleForm.name"
                            @keyup.native.enter="submit"
                            placeholder="帐号:"
                            @click="half">
                        <i class="user icon"></i>
                    </div>
                </el-form-item>
                <el-form-item prop="password">
                    <div class="ui left icon input w-100p pos-r">
                        <input type="password"
                            v-model="ruleForm.password"
                            @keyup.native.enter="submit"
                            placeholder="密码:">
                        <i class="privacy icon"></i>
                    </div>
                </el-form-item>
                <el-form-item>
                    <a v-if="showSubmit" class="submit" @click="submit('ruleForm')">
                        <i class="el-icon-loading" v-if="elIconLoading"></i>
                        登录
                    </a>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    export default {
        name:'',
        data() {
            return {
                showSubmit:false,
                elIconLoading:false,
                ruleForm:{
                    name:'',
                    password:''
                },
                rules:{
                    name:[
                        { required:true, message:'请输入用户名称', trigger:'change' },
                        { min:3, max:20, message:'长度在 3 到 20 个字符', trigger:'change' }
                    ],
                    password:[
                        { required:true, message:'请输入密码', trigger:'change' },
                        { min:3, max:20, message:'长度在 3 到 20 个字符', trigger:'change' }
                    ]
                }
            }
        },
        computed:{
            show(){

                return true
            }
        },
        mounted() {
            //开发模式我帮你把密码写了
            this.$nextTick(() => {
                if(process.env.NODE_ENV === 'development'){
                    this.ruleForm.name = 'administrator'
                    this.ruleForm.password = '000000'
                }
            })
        },
        watch:{
            ruleForm:{
                handler(val) {
                    this.init(val)
                },
                deep:true
            }
        },
        methods:{
            init(val){
                let _name;
                let _password;
                if(val.name){
                    this.$refs['ruleForm'].validateField('name', (valid) => {
                        _name = !valid
                    });
                }
                if(val.password){
                    this.$refs['ruleForm'].validateField('password', (valid) => {
                        _password = !valid;
                    });
                }
                if(_name && _password){
                    this.showSubmit = true;
                    this.half();
                }else{
                    this.showSubmit = false;
                    this.empty();
                }
            },
            full() {
                this.$refs.content.className = 'content full';
                this.$refs.editorialCont.className = 'editorial_cont full';
                setTimeout(() => {
                    this.$router.replace({
                        path:'/welcome'
                    });
                }, 2000);
            },
            half() {
                this.$refs.content.className = 'content half';
                this.$refs.editorialCont.className = 'editorial_cont half';
            },
            empty() {
                this.$refs.content.className = 'content empty';
                this.$refs.editorialCont.className = 'editorial_cont empty';
            },
            submit(formName) {
                let vm = this;
                this.elIconLoading = true;
                if(this.showSubmit){
                    this.$store
                        .dispatch('UserLogin', {
                            username:vm.ruleForm.name,
                            password:vm.ruleForm.password
                        })
                        .then((data) => {
                            if(data.result === 'success'){
                                vm.full();
                            }else{
                                vm.$notify.error({
                                    title:'错误',
                                    message:'帐号或者密码错误'
                                });
                            }
                        })
                        .catch(err => {
                            this.log(err);
                        });
                }

            }
        }
    }
</script>
